<template>
    <!-- pages/inget/index.wxml -->
    <view class="all">
        <form @submit.stop.prevent="formSubmit" @reset.stop.prevent="formReset" @submit="ingetSubmit">
            <view class="container">
                <l-image-picker :count="9" @linchange="onChangeTap" />
                <text class="page">点击添加封面</text>
            </view>
            <view>
                <view class="inputs">
                    <text>单位名称：</text>
                    <input name="nameOfWorkplace" />
                </view>
                <view class="inputs">
                    <text>专业/学校要求（非必填）:</text>
                    <input name="majorShool" />
                </view>
                <view class="inputs">
                    <text>限制人数：</text>
                    <input name="limit" />
                </view>
                <view class="inputs">
                    <text>截止时间：</text>
                    <input name="deadline" />
                </view>
                <view class="inputs">
                    <text>公司地址及名称：</text>
                    <input name="positionOfCom" />
                </view>
                <text>职位详情:</text>
                <textarea width:700rpx name="desOfPos"></textarea>
                <view class="inputs">
                    <text>联系方式：</text>
                    <input name="phone" />
                </view>
                <view class="inputs">
                    <text>更多（非必填）：</text>
                    <input name="moreIn" />
                </view>
            </view>
            <view class="more">
                <l-image-picker :count="9" @linchange="onChangeTap" />
                <text class="moreIm">点击添加更多</text>
            </view>
            <view class="btn-area">
                <button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
                <button style="margin: 30rpx 0" formType="reset">Reset</button>
            </view>
        </form>
    </view>
</template>

<script>
import lImagePicker from '@/miniprogram_npm/lin-ui/image-picker/index';
import lInput from '@/miniprogram_npm/lin-ui/input/index';
// pages/inget/index.js
export default {
    data() {
        return {
            pickerHidden: true,
            chosen: ''
        };
    },
    onShareAppMessage() {
        return {
            title: 'form',
            path: 'page/component/pages/form/form'
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        pickerConfirm(e) {
            this.setData({
                pickerHidden: true
            });
            this.setData({
                chosen: e.detail.value
            });
        },

        pickerCancel() {
            this.setData({
                pickerHidden: true
            });
        },

        pickerShow() {
            this.setData({
                pickerHidden: false
            });
        },

        formSubmit(e) {
            console.log('form发生了submit事件，携带数据为：', e.detail.value);
        },

        formReset(e) {
            console.log('form发生了reset事件，携带数据为：', e.detail.value);
            this.setData({
                chosen: ''
            });
        },

        ingetSubmit: function (e) {
            this.setData({
                nameOfWorkplace: e.detail.value.nameOfWorkplace,
                majorShool: e.detail.value.majorShool,
                limit: e.detail.value.limit,
                deadline: e.detail.value.deadline,
                positionOfCom: e.detail.value.positionOfCom,
                desOfPos: e.detail.value.desOfPos,
                phone: e.detail.value.phone,
                moreIn: e.detail.value.moreIn
            });
        }
    }
};
</script>
<style>
/* pages/inget/index.wxss */
.all {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* 上下边线 */
    border-top: 2rpx solid #b8b5b5;
    border-bottom: 2rpx solid #b8b5b5;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    width: 700rpx;
    height: auto;
    margin-top: 20rpx;
    margin: 20rpx, 10rpx, 20rpx, 10rpx;
    align-items: center;
    justify-content: flex-start;
}
.page {
    font-size: 60rpx;
    font-weight: 1000;
    margin-left: 20rpx;
    margin-top: 30rpx;
}
.inputs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 30rpx;
    align-items: left;
}
input {
    border-bottom: 2rpx solid #b8b5b5;
}
textarea {
    margin-top: 20rpx;
    border-top: 2rpx solid #2b2525;
    vertical-align: center;
}
.more {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* 上下边线 */
    border-top: 2rpx solid #b8b5b5;
    border-bottom: 2rpx solid #b8b5b5;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    width: 700rpx;
    height: auto;
    margin-top: 20rpx;
    margin: 20rpx, 10rpx, 20rpx, 10rpx;
    align-items: center;
    justify-content: flex-start;
}
.moreIm {
    font-size: 34rpx;
    font-weight: 700;
    margin-left: 20rpx;
    margin-top: 30rpx;
}
.btn-area {
    display: flex;
    flex-direction: row;
}
</style>
